<template>
    <view>

        <view class="container">

            <!-- 搜索栏 -->
            <view class="search-section u-flex u-bg-white u-row-between border-bottom">
                <view class="search-content u-flex u-margin-left-20">
                    <view class="search-icon u-flex">
                        <text class="icon u-font-32 u-color-primary">&#xe633;</text>
                    </view>
                    <view class="search-input u-flex u-margin-left-20">
                        <input type="text" @input="search()" v-model="keywords" :placeholder="placeholder"
                            class="u-font-28 search-input-field" placeholder-class="placeholder-style" />
                    </view>
                </view>
            </view>

            <!-- 部门列表 -->
            <view class="list-container">
                <view class="list-item u-flex-col u-padding-20 border-bottom" v-for="(item,index) in list" :key="index"
                    @click="toggleSelect(item)">
                    <view class="item-header u-flex u-row-between u-col-center">
                        <view class="item-left u-flex u-col-center">
                            <view class="checkbox" :class="{'checkbox-selected': isSelected(item.id)}">
                                <text v-if="isSelected(item.id)" class="checkbox-icon">✓</text>
                            </view>
                            <text class="u-font-28 u-color-dark u-font-bold item-title">{{item.title}}</text>
                        </view>
                        <view class="select-btn" :class="{'selected': isSelected(item.id)}">
                            <text class="u-font-24" :class="isSelected(item.id) ? 'u-color-white' : 'u-color-primary'">
                                {{isSelected(item.id) ? '已选择' : '选择'}}
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 底部操作栏 -->
            <view class="footer-section" v-if="selectedList.length > 0">
                <view class="footer-content u-flex u-row-between u-col-center">
                    <view class="selected-info">
                        <text class="u-font-26 u-color-dark">已选择 {{selectedList.length}} 个部门</text>
                    </view>
                    <view class="confirm-btn" @click="confirmSelection" :class="submitEnable?'':'disabled'">
                        <text class="u-font-28 u-color-white">确认选择</text>
                    </view>
                </view>
            </view>

            <uni-load-more :status="status"></uni-load-more>

        </view>

    </view>
</template>

<script>
    /**
     * 带搜索功能的多选组件
     * @description 此组件一般用于多选。
     * @tutorial https://www.dfer.site
     * @property {Array} list 列表内容
     * @property {Array} defaultValue 默认勾选的id。例如：[1,2,3]
     * @event {Function} searchHandler 搜索框输入
     * @event {Function} confirmHandler 确定
     * @example <dfer-multi-select @searchHandler="search" @confirmHandler="confirmSelection" :list="list" :status="status" placeholder="请输入要搜索的部门名" />
     */
    export default {
        name: "dfer-multi-select",
        data() {
            return {
                keywords: '',
                selectedList: [],
                submitEnable: true
            };
        },
        props: {
            list: {
                type: Array,
                default: [{
                    id: 0,
                    title: '测试'
                }]
            },
            status: {
                type: String,
                default: "more"
            },
            defaultValue: {
                type: Array,
                default: []
            },
            placeholder: {
                type: String,
                default: "请输入关键词"
            },
            extend: {
                type: [String, Number, Object]
            },
            trace: {
                type: Boolean,
                default () {
                    return false
                }
            }
        },
        watch: {
            defaultValue: {
                handler(newVal) {
                    if (this.trace)
                        console.log('defaultValue', newVal);
                    this.selectedList = newVal
                },
                immediate: true
            }
        },
        created() {},
        methods: {
            search() {
                if (this.trace)
                    console.log(this.keywords);
                this.$emit('searchHandler', this.keywords, this.extend);
            },
            /**
             * 切换选择状态
             * @param {Object} item 部门信息
             */
            toggleSelect(item) {
                const index = this.selectedList.findIndex(selected => selected.id === item.id);
                if (index > -1) {
                    // 如果已选择，则移除
                    this.selectedList.splice(index, 1);
                } else {
                    // 如果未选择，则添加
                    this.selectedList.push({
                        id: item.id,
                        title: item.title
                    });
                }
            },

            /**
             * 检查是否已选择
             * @param {String} id 部门ID
             */
            isSelected(id) {
                return this.selectedList.some(item => item.id === id);
            },

            /**
             * 确认选择
             */
            confirmSelection() {
                if (this.selectedList.length === 0) {
                    return this.showToast('请至少选择一个部门');
                }

                if (!this.submitEnable) {
                    return;
                }
                this.submitEnable = false;
                this.showLoading();
                let ids = [];
                let titles = [];
                this.selectedList.forEach(function(item) {
                    ids.push(item.id);
                    titles.push(item.title);
                });

                let data = {
                    list: this.selectedList,
                    ids: ids,
                    titles: titles
                };
                if (this.trace)
                    console.log(data);
                this.$emit('confirmHandler', data, this.extend);
            },

        }
    }
</script>

<style lang="scss">
    .container {
        background-color: #f8f9fa;
        min-height: 100vh;
    }

    .search-section {
        width: 750rpx;
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 99;
        height: 100rpx;
        background: #ffffff;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    }

    .search-content {
        width: 100%;
        align-items: center;
    }

    .search-input-field {
        width: 500rpx;
        height: 60rpx;
        background: #f8f9fa;
        border-radius: 30rpx;
        padding: 0 20rpx;
    }

    .placeholder-style {
        color: #999;
    }

    .list-container {
        background: #ffffff;
        padding-bottom: 1rem;
    }

    .list-item {
        background: #ffffff;
        transition: all 0.3s;
    }

    .list-item:active {
        background: #f8f9fa;
    }

    .item-header {
        width: 100%;
    }

    .item-left {
        flex: 1;
    }

    .checkbox {
        width: 36rpx;
        height: 36rpx;
        border: 2rpx solid #dcdfe6;
        border-radius: 6rpx;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .checkbox-selected {
        background: #1890ff;
        border-color: #1890ff;
    }

    .checkbox-icon {
        color: #ffffff;
        font-size: 24rpx;
        font-weight: bold;
    }

    .item-title {
        flex: 1;
    }

    .select-btn {
        width: 120rpx;
        height: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25rpx;
        border: 2rpx solid #1890ff;
        background: transparent;
        transition: all 0.3s;
    }

    .select-btn.selected {
        background: #1890ff;
        border-color: #1890ff;
    }

    .footer-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 20rpx 30rpx;
        box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
        border-top: 2rpx solid #f0f0f0;
    }

    .footer-content {
        width: 100%;
    }

    .selected-info {
        flex: 1;
    }

    .confirm-btn {
        background: #1890ff;
        padding: 16rpx 40rpx;
        border-radius: 8rpx;
        box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
    }

    .border-bottom {
        border-bottom: 2rpx solid #f0f0f0;
    }

    .u-color-primary {
        color: #1890ff;
    }

    .u-color-dark {
        color: #262626;
    }

    .u-color-gray {
        color: #595959;
    }

    .u-color-light {
        color: #bfbfbf;
    }
</style>